<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-10-19 11:35:30
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-10-20 20:45:26
 * @FilePath: \uni-preset-vue-vite-ts\src\pages\login\index.vue
 * @Description:  
 * qq1908552310
-->
<template>
    <div class="login_container">
        <Header title="登录"></Header>
        <image src="../../static/PNG/jhk.png" class="logo_gb" />
        <div class="login_main">
            <div class="main_header">
                <img src="../../static/logo.png" class="logo" alt="">
                <div class="logotext">{{ formData.type == "login" ? "欢迎登录" : "注册" }}</div>
            </div>
            <div class="main_form">
                <div class="username" id="inp">
                    <span class="userLabel">账号</span>
                    <input type="text" class="userInp" v-model="formData.username">
                </div>
                <div class="password" id="inp">
                    <span class="pwdLabel">密码</span>
                    <input type="text" class="pwdInp" v-model="formData.password">
                </div>
                <div class="vcode" id="inp">
                    <span class="codeLabel">验证码</span>
                    <input type="text" class="codeInp" v-model="formData.vcode">
                    <image class="codeImg" :src="captchaData.caches" @click="refreshCaptcha" />
                </div>
            </div>
            <div class="warning">忘记密码?</div>
        </div>
        <div class="Btn">
            <button type="submit" class="loginBtn" @click="submitForm">登录</button>
            <button type="submit" class="registryBtn">注册</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/Header.vue';
import { reactive, ref } from "vue";
import { Base64 } from 'js-base64';

import { onMounted } from 'vue'
// 表单数据
const formData: any = reactive({
    type: "login",
    username: "",
    password: "",
    vcode: ""
});
const captchaData = reactive({
    caches: "",
    catext: ""
})
// 提交表单
const submitForm = async () => {
    if (!formData.username || !formData.password || !formData.vcode) {
        uni.showToast({
            title: '请填写必填项',
            icon: 'none'
        })
        return
    } else {
        if (formData.vcode.toLowerCase() !== captchaData.catext.toLowerCase()) {
            uni.showToast({
                title: '验证码错误',
                icon: 'none'
            });
            return;
        } else {
            // 登录
            uniCloud.callFunction({
                name: "userset",
                data: formData,
                success: (res => {
                    if (res.result.code == 0) {
                        uni.showToast({
                            title: '登录成功',
                            icon: "success"
                        })
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1,
                            })
                            uni.setStorageSync('username', res.result.username);
                            uni.setStorageSync('token', res.result.token)
                            uni.setStorageSync('type', "login")
                        }, 1000)
                    } else {
                        uni.showToast({
                            title: res.result.message,
                            icon: "error"
                        })
                    }
                }),
                fail: (err => {
                    console.log(err, "登录ressssssssssssss");
                })
            })
        }
    }
};
// 点击验证码刷新
let lastClickTime = 0;
const refreshCaptcha = async () => {
    const now = new Date().getTime();
    if (now - lastClickTime > 1000) {
        uniCloud.callFunction({
            name: "code",
            success: (res: any) => {
                if (res.result.code === 0) {
                    const base64Data = Base64.encode(
                        decodeURIComponent(escape(res.result.data.svg))
                    );
                    captchaData.catext = res.result.data.text
                    captchaData.caches = 'data:image/svg+xml;base64,' + base64Data;
                }
            }
        })
        lastClickTime = now;
    }
}
onMounted(() => {
    refreshCaptcha()
})
</script>

<style scoped lang="scss">
.login_container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .logo_gb {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: -1;
    }

    .login_main {
        width: 100%;

        .main_header {
            width: 100%;
            height: 200rpx;
            margin-top: 230rpx;
            text-align: center;

            .logo {
                width: 113rpx;
                height: 120rpx;
            }

            .logotext {
                font-size: 40rpx;
            }
        }

        .main_form {
            width: 90%;
            height: 290rpx;
            margin: 10px auto;
            border-radius: 8px;


            #inp {
                width: 100%;
                height: 33%;
                margin: 10rpx 0;
                background-color: #fff;
                box-shadow: 0 2px 4px rgba(46, 39, 39, 0.8);
            }

            .username {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .userLabel {
                    display: block;
                    width: 120rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    text-align: center;
                    border-right: solid 1px #b1b1b1;
                }

                .userInp {
                    width: 77%;
                    height: 100%;
                }
            }

            .password {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .pwdLabel {
                    display: block;
                    width: 120rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    text-align: center;
                    border-right: solid 1px #b1b1b1;
                }

                .pwdInp {
                    width: 77%;
                    height: 100%;
                }
            }

            .vcode {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .codeLabel {
                    display: block;
                    width: 120rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    text-align: center;
                    border-right: solid 1px #b1b1b1;
                }

                .codeInp {
                    width: 38%;
                    height: 100%;
                }

                .codeImg {
                    width: 33%;
                    height: 98%;
                }
            }
        }

        .warning {
            text-align: right;
            width: 90%;
            margin: 10rpx auto;
            color: #fff;
            text-decoration: solid;
        }
    }

    .Btn {
        width: 90%;
        height: 200rpx;
        margin: 20rpx auto;

        .loginBtn {
            background-color: #3994fc;
            color: #fff;
            margin-bottom: 10px;
        }

        .loginBtn:active {
            background-color: #458fff;
            color: #ffffffa9;
        }
    }
}
</style>
